
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <title>预约列表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

    <link rel="stylesheet" href="/public/static/css/global.css">
    <link rel="stylesheet" href="/public/static/css/default.css">
    <style>
        .circle{
            width: 50px;
            height: 50px;
            background-color:#86dda6;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            text-align: center;
            line-height: 50px;;
        }
        .circle a{
            color: #FFF;
            font-size: 16px;
        }
    </style>

</head>
<body class="mobile">
<!--<header id="header">
    <span class="title">预约列表</span>
    <a href="javascript:void(0);javascript:history.back()" class="back"><img src="/public/static/picture/btn-back.png" alt="返回上一层"></a>

</header>-->
<div id="dg" style="z-index: 9999; position: fixed ! important; right: 5%; top: 80%;">
    <div class="circle">
        <a href="{:url(MODULE_NAME.\'/home\')}">主页</a>
    </div>
</div>
<div id="container">
    <!--<form action="" method="get" id="formsearchbox">
        <div id="search">
            <input type="text" name="keyword" id="keyword" value="{$Request.get.keyword}" placeholder="请输入搜索关键字">
            <option value="Music" selected="selected"></option><a href="javascript:void(0)javascript:;" id="btnSearch" onclick="$('#formsearchbox').submit()"></a>
        </div>
    </form>-->
    <ul class="list-song">
        {volist name="dataList" id="vo"}
        <li><a href="{:url(MODULE_NAME.'/info',['id'=>$vo.id])}">
            <div class="cover">
                <img src="{$userImg}" style="border-radius:100px" class="lazyload"></div>
            <div class="text">
                <div class="song fz1-3">{$vo.name}</div>
                <div class="artist">手机：{$vo.mobile}</div>
                <div class="artist">预约日期：{$vo.reserve_date}</div>
                <div class="artist">预约状态：{:config('reserve_status')[$vo.usage]}</div>
            </div>
            <div class="go"><img src="/public/static/picture/icon-go.png" alt=""></div></a>
        </li>
        {/volist}
    </ul>



</div>
<footer class="noplayer" id="loadmore">
    {if condition="count($dataList) ==0"}
    <li>对不起,您暂时没有预约信息</li>
    {else /}
    点击加载更多
    {/if}

</footer>
</body>

<script>
    //加载更多
    var nStart = 10;
    var keyword = $("#keyword").val();

    $('#loadmore').click(function() {
        $("#loadmore").html('<i class="weui-loading"></i>正在加载中');
        var _this = $(".list-song");
        $.post("{:url(MODULE_NAME.'/userList')}", {start: nStart,keyword:keyword}, function(res) {
            var res = JSON.parse(res);
            if(res.info=='nodata'){
                $("#loadmore").text('没有数据了');
                return false;
            }
            $.each(res.info, function(i, item) {
                var status = getStatus(item.usage);
                _this.append('<li><a href="/index/index/info/id/'+item.id+'">\n' +
                        '            <div class="cover">\n' +
                        '                <img src="'+"{$userImg}"+'" style="border-radius:100px" class="lazyload"></div>\n' +
                        '            <div class="text">\n' +
                        '                <div class="song fz1-3">'+item.name+'</div>\n' +
                        '                <div class="artist">手机：'+item.mobile+'</div>\n' +
                        '                <div class="artist">注册时间：'+item.reserve_date+'</div>\n' +
                        '                <div class="artist">预约状态：'+status+'</div>\n' +
                        '            </div>\n' +
                        '            <div class="go"><img src="/public/static/picture/icon-go.png" alt=""></div></a>\n' +
                        '        </li>');
            });
            nStart += 10;
            $("#loadmore").html('点击加载更多');
        });
    });
    function getStatus(n){
        var status = '';
        switch(n)
        {
            case 1:
                status = '已预约未出票';
                break;
            case 2:
                status = '已受理未出票';
                break;
            case 3:
                status = '已受理已出票';
                break;
            case 4:
                status = '已取票';
                break;
            case 5:
                status = '未到场';
                break;
            case 6:
                status = '取消';
                break;
            default:
        }
        return status;
    }
</script>



</html>